<!DOCTYPE html>
<html>

<head lang="en">
  <meta charset="UTF-8">
  <title></title>
  <style>
    ul {
      list-style: none;
    }

    * {
      margin: 0;
      padding: 0;
    }

    div {
      width: 1150px;
      height: 400px;
      margin: 50px auto;
      border: 1px solid red;
      overflow: hidden;
    }

    div li {
      width: 240px;
      height: 400px;
      float: left;
    }

    div ul {
      width: 1300px;
    }
  </style>
</head>

<body>
  <div id="box">
    <ul>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
    </ul>
  </div>
</body>

<script>
  let li = document.querySelectorAll("li");

  // 封装的函数
  // 判断浏览器是否自持方法，得到css返回值
  function getStyle(element, attr) {
    //判断浏览器是否支持这个方法
    return window.getComputedStyle ? window.getComputedStyle(element, null)[attr] : element.currentStyle[attr];
  }

  // 封装点击事件移动函数
  //设置任意的一个元素,移动到指定的目标位置
  function fn(element, json, fn1) {
    clearInterval(element.timeId);
    //定时器的id值存储到对象的一个属性中
    element.timeId = setInterval(function () {
      var flag = true; //判断目标到达
      for (const attr in json) {
        //判断这个属性attr中是不是opacity
        if (attr == "opacity") {
          //获取元素的当前的透明度，放大一百倍
          var current = getStyle(element, attr) * 100;
          // 当前属性对应的目标值,放大一百倍
          var target = json[attr] * 100;
          //每次移动的距离
          var step = (target - current) / 10;
          step = step > 0 ? Math.ceil(step) : Math.floor(step); //当前移动到位置
          current += step;
          element.style[attr] = current / 100;
        } else if (attr == "zIndex") { //判断这个属性attr中是不是zIndex
          element.style[attr] = json[attr];

        } else {
          //获取元素的当前的位置,数字类型
          var current = parseInt(getStyle(element, attr));
          // 当前属性对应的目标值
          var target = json[attr];
          //每次移动的距离
          var step = (target - current) / 10;
          step = step > 0 ? Math.ceil(step) : Math.floor(step); //当前移动到位置
          current += step;
          element.style[attr] = current + "px";
        }

        if (current != target) {
          flag = false;
        }
      }
      if (flag) {
        //清理定时器
        clearInterval(element.timeId);
        // 所有属性到达目标后才能使用，并且用户有输入函数
        if (fn1) {
          fn1();
        }
      }
    }, 20);
  }


  // 加载图片
  for (let i = 0; i < li.length; i++) {
    li[i].style.backgroundImage = "url(images/" + (i + 1) + ".jpg)";

    // 鼠标进入
    li[i].onmouseover = fn1;

    // 鼠标离开
    li[i].onmouseout = fn2;

    function fn1() {
      for (let j = 0; j < li.length; j++) {
        fn(li[j], {
          "width": 100
        }); //动画效果
      }
      fn(this, {
        "width": 800
      })
    }

    function fn2() {
      for (let j = 0; j < li.length; j++) {
        fn(li[j], {
          "width": 235
        }); //动画效果 
        }
      }
    }
</script>

</html>